<template>
  <div class="login">
    <!-- 登入页面 -->
    <el-card>
      <!-- 卡片标题 使用具名插槽 -->
      <template #header>医院后台管理系统</template>

      <!-- 卡片内容，默认插槽不用solt -->
      <el-form ref="form" :model="user" :rules="rules">
        <!-- 1.账号 -->
        <el-form-item label="账号" prop="username">
          <el-input v-model="user.username"></el-input>
        </el-form-item>

        <!-- 2.密码 -->
        <el-form-item label="密码" prop="password">
          <el-input show-password v-model="user.password"></el-input>
        </el-form-item>

        <!-- 3.按钮 -->
        <el-form-item>
          <el-button type="primary" @click="login">登录</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'LoginIndex',
  data() {
    return {
      //提交的数据
      user: {
        username: '',
        password: '',
      },
      //验证规则对象
      rules: {
        /*required 属性规定必需在提交之前填写输入字段
            message 验证不通过时的提示
            对el-input输入框的验证，trigger的值选blur，即失去焦点时进行验证
          */
        username: [
          { required: true, message: '请输入用户名', trigger: ['blur', 'change'] },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: ['blur', 'change'] },
        ],
        password: [
          { required: true, message: '请输入密码', trigger: ['blur', 'change'] },
          { min: 3, max: 6, message: '长度在 3 到 6 个字符', trigger: ['blur', 'change'] },
        ],
      },
    };
  },
  methods: {
    login() {
      //进行完整的校验
      this.$refs.form.validate(valid => {
        // valid 验证通过-> true; 验证不通过-> false
        if (valid) {
          if (this.user.username != 'admin' && this.user.password != '123456') {
            this.$message.error('账号及密码错误!');
          } else if (this.user.username != 'admin') {
            this.$message.error('账号错误!');
          } else if (this.user.password != '123456') {
            this.$message.error('密码错误!');
          } else {
            this.$message.success('登入成功!');
            const user = { userNumber: this.user.username, pwd: this.user.password };
            localStorage.setItem('user', JSON.stringify(user));  //本地存储
            this.$router.push('/layout'); //跳转界面
          }
        } else {
          return false;
        }
      });
    },

    //重置表单
    resetForm(formName) {
      this.$refs.form.resetFields();
    },
  },
};
</script>

<style lang="scss" scoped>
.login {
  //将高度设置为当前屏幕可见高度的100%
  height: 100vh;
  //添加首页背景图，不平铺、居中、占满屏幕
  background: url(@/assets/login-bg.svg) no-repeat center/cover;
  //使用element-ui框架，组件名就是类名
  .el-card {
    width: 420px;
    //将卡片移致中间
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    //由于当前样式加了scoped,只当前组件生效，
    //样式穿透
    ::v-deep .el-card__header {
      text-align: center; //文字居中
      background-color: #4370b3; //背景色
      color: #fff;
      height: 80px;
      line-height: 40px;
    }
  }
}
</style>